<template>
  <div v-show="isShow"
    class="alert_msg_popup">
    <div v-for="(item, index) in alertList"
      :key="index"
      v-show="item.type === alertType"
      :class="'alert_' + item.type"
      class="alert">
      <i :class="item.iconFont"
        :style="{color: item.color}"
        class="icon iconfont"></i>
      <div class="alert_content">
        <template v-if="item.type === 'loading'">
          {{$t('Layout.alertMsg.loadng')}}
        </template>
        <!-- 为了处理一些换行的文本展示 -->
        <template v-else>
          <div v-html="message"></div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 提示框提示信息
    message: {
      type: String,
      default() {
        return ''
      }
    },
    // 提示框类型
    alertType: {
      type: String,
      default() {
        return 'info'
      }
    },
    // 显示时长
    duration: {
      type: Number,
      default() {
        return 2000
      }
    }
  },
  data() {
    return {
      // 是否显示
      isShow: false,
      alertList: [
        {
          type: 'loading',
          iconFont: 'icon-info-shape',
          color: '#409EFF'
        },
        {
          type: 'info',
          iconFont: 'icon-info-shape',
          color: '#409EFF'
        },
        {
          type: 'warning',
          iconFont: 'icon-warning-shape',
          color: '#ff884d'
        },
        {
          type: 'success',
          iconFont: 'icon-success-shape',
          color: '#6EC884'
        },
        {
          type: 'error',
          iconFont: 'icon-danger-shape',
          color: '#ED5344'
        }
      ]
    }
  },
  methods: {
    // 显示时长
    showDuration() {
      const timer = window.setTimeout(() => {
        this.isShow = false
        this.destroy()
      }, this.duration)
    },
    // 销毁组件
    destroy: function() {
      this.$destroy()
      document.body.removeChild(this.$el)
    }
  },
  created() {
    //  如果是token失效，则不做相关提示
    if (this.message !== '-401') {
      this.isShow = true
      this.showDuration()
    }
  }
}
</script>
<style lang="less">
.alert_msg_popup {
  position: absolute;
  top: 0;
  z-index: 10000;
  width: 100%;
  height: 50px;
  text-align: center;
  .alert {
    display: inline-flex;
    align-items: center;
    padding: 0px 25px 0px 25px;
    height: 50px;
    background: @whiteColor;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
    text-align: left;
    &.alert_loading {
      width: 160px;
    }
    i {
      text-align: left;
      font-size: 22px;
      line-height: 50px;
    }
    .alert_content {
      padding-left: 10px;
      color: @font-color-important;
      font-size: 14px;
    }
  }
}
</style>
